<script setup>
import { getArticleListService } from "@/api/article";
import { ref } from "vue";
import { formatTime } from "@/utils/format";
import ChannelSelect from "./components/ChannelSelect.vue";
import ArticleEdit from "./components/ArticleEdit.vue";
import { delArticleService } from "@/api/article";
import { ElMessage } from "element-plus";

const articleList = ref([]);
const loading = ref(false);
const pageTotal = ref(0);
const params = ref({
  pagenum: 1,
  pagesize: 10,
  cate_id: "",
  state: "",
});
const getArticleList = async () => {
  loading.value = true;
  const {
    data: { data, total },
  } = await getArticleListService(params.value);
  articleList.value = data;
  pageTotal.value = Number(total);
  loading.value = false;
};
getArticleList();

const onDelete = async ({ id }) => {
  await ElMessageBox.confirm("确认删除？", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  });
  await delArticleService(id);
  ElMessage.success("删除成功");
  getArticleList();
};
const changeCurrentPage = (page) => {
  getArticleList();
};
const onSearch = () => {
  params.value.pagenum = 1;
  getArticleList();
};
const onReset = () => {
  params.value = {
    pagenum: 1,
    pagesize: 10,
    cate_id: "",
    state: "",
  };
  getArticleList();
};
const drawer = ref();
const addArticle = () => {
  drawer.value.open({});
};
const onEdit = (row) => {
  drawer.value.open(row);
};
const handleSuccess = (type) => {
  if (type === "add") {
    params.value.pagenum = Math.ceil(
      Math.ceil((pageTotal.value + 1) / params.value.pagesize)
    );
    getArticleList();
  } else {
    getArticleList();
  }
};
</script>

<template>
  <PageContainer title="文章管理">
    <template #extra>
      <el-button type="primary" @click="addArticle">增添文章</el-button>
    </template>

    <el-form :inline="true">
      <el-form-item label="文章分类" class="search">
        <ChannelSelect v-model.number="params.cate_id"></ChannelSelect>
      </el-form-item>
      <el-form-item label="发布状态" class="search">
        <el-select v-model="params.state">
          <el-option label="已发布" value="已发布"></el-option>
          <el-option label="打草稿" value="草稿"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布状态">
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button type="info" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="articleList"
      stripe
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column label="文章标题" width="400">
        <template #default="scope">
          <el-link underline="never" type="primary">{{
            scope.row.title
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="cate_name" label="分类名字" width="180" />
      <el-table-column label="发布时间" width="580">
        <template #default="{ row }">
          {{ formatTime(row.pub_date) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="onEdit(row)" plain>编辑</el-button>
          <el-button type="danger" @click="onDelete(row)" plain>删除</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="内容为空" />
      </template>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="pageTotal"
      @change="changeCurrentPage"
      :page-size="10"
      v-model:current-page="params.pagenum"
    />
  </PageContainer>

  <ArticleEdit ref="drawer" @success="handleSuccess"></ArticleEdit>
</template>

<style scoped lang="scss">
.search {
  min-width: 220px !important;
}
:deep(.el-pagination) {
  position: absolute !important;
  bottom: 20px !important;
  right: 30px !important;
}
</style>
